<template>
  <div class="breadcrumb-box">
    <el-breadcrumb class="f-breadcrumb" v-bind="$attrs">
      <el-breadcrumb-item
        v-for="(item, index) in paths"
        :key="index"
        :to="!item.path ? null : { path: item.path, query: item.query }"
        >{{ item.name }}</el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    paths: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      outerIndex: ''
    }
  },
  created() {}
}
</script>

<style lang="less">
.breadcrumb-box {
  display: flex;
  align-items: center;
  height: 30px;
  .f-breadcrumb {
    display: inline-block;
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        font-size: 16px;
      }
    }
    @media print {
      display: none;
    }
  }
  .el-breadcrumb__separator[class*='icon'] {
    margin: 0 15px;
  }
  .el-breadcrumb__inner.is-link,
  .el-breadcrumb__inner a {
    color: #606266;
  }
}
</style>
